/*
选择用户头像的UI组件
 */
import React, {Component} from 'react';
import {List, Grid} from 'antd-mobile';
import PropTypes from 'prop-types';

class HeaderSelector extends Component {
    static propTypes = {
        setHeader: PropTypes.func.isRequired
    }

    state = {
        icon: null //图片对象
    }

    constructor(props) {
        super(props);
        this.headerList = [];
        for (let i = 0; i < 20; i++) {
            this.headerList.push({
                value: 'headPortrait' + (i + 1),
                text: '头像' + (i + 1),
                icon: require(`../../assets/images/headPortrait${i + 1}.png`) //不能使用import
            });
        }
    }

    handleClick = ({value, icon}) => {
        this.setState({icon});
        this.props.setHeader(value);
    }

    render() {
        const {icon} = this.state;
        const listHeader = !icon ? '请选择头像' : (
            <div>已选择头像：<img src={icon}/></div>
        );
        return (
            <List renderHeader={() => listHeader}>
                <Grid data={this.headerList} columnNum={5} onClick={this.handleClick}></Grid>
            </List>
        )
    }
}

export default HeaderSelector;